<template>
    <div class="add-and-del">
        <el-card>
            <el-button type="primary" size="small" plain @click="add" v-show="isShow">新增</el-button>
            <el-button type="danger" size="small" plain @click="dels" v-show="delShow"
                :disabled="isDisabled">批量删除</el-button>
        </el-card>
    </div>
</template>
<script>
export default {
    name: 'AddAndDel',
    components: {

    },
    mixins: [],
    props: ['multipleSelection'],
    data() {
        return {
            isShow: true,
            delShow: true,
            isDisabled: true,
            content: ''
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.changeShow()
        this.$bus.$on('multipleSelection', this.changeIsDisabled)

    },
    methods: {
        add() {
            this.$bus.$emit('add', true)
            this.$bus.$emit('content', this.content)
        },
        dels() {
            this.$emit('delsByIds')
        },
        changeShow() {
            if (this.$route.fullPath == '/comments' || this.$route.fullPath == '/user_management') {
                this.isShow = false
            } else if (this.$route.fullPath == '/permission' || this.$route.fullPath == '/admin_management') {
                this.delShow = false
            }
        },
        changeIsDisabled(multipleSelection) {
            if (multipleSelection.length > 0) {
                this.isDisabled = false
            }
        }
    },
    beforeDestroy() {
    }
};
</script>
<style lang='less' scoped>
.add-and-del {
    .el-card {
        margin-bottom: 5px;
    }

    .el-button--primary.is-plain {
        color: #11a983;
        background: #e7f6f3;
        border-color: #a0ddcd;
    }

    .el-button--primary.is-plain:hover {
        color: white;
        background-color: #11A983;
    }

}
</style>